<template>
    <div>
        <div class="register aui-bg-f" v-if="is_show">
            <div class="content">
                <div class="aui-content aui-padded-b-5 aui-bg-f">
                    <ul class="aui-list aui-form-list" style="background-image: none">
                        <li class="aui-list-item aui-padded-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="2" class="aui-text-center">
                                    <i class="iconfont icon-shouji54 aui-ftn18 aui-text-6"></i>
                                </van-col>
                                <van-col span="22" class="aui-padded-l-10">
                                    <input type="text" name="mobile" v-model="user.mobile" placeholder="手机号" class="aui-ftn14">
                                </van-col>
                            </van-row>
                        </li>

                        <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="2" class="aui-text-center">
                                    <i class="iconfont icon-yanzhengma aui-ftn18"></i>
                                </van-col>
                                <van-col span="16" class="aui-padded-l-10">
                                    <input type="text" name="verify" v-model="user.verify" placeholder="验证码" class="aui-ftn14">
                                </van-col>
                                <van-col span="6">
                                    <div class="aui-btn" @click="fnVerify" v-bind:class="{'aui-btn-danger': !code.isSet, 'aui-btn-primary': code.isSet}" v-cloak>{{code.verify}}</div>
                                </van-col>
                            </van-row>
                        </li>

                        <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="2" class="aui-text-center">
                                    <i class="iconfont icon-mima aui-ftn18 aui-text-6"></i>
                                </van-col>
                                <van-col span="22" class="aui-padded-l-10">
                                    <input type="password" name="mobile" v-model="user.password" placeholder="密码"  class="aui-ftn14">
                                </van-col>
                            </van-row>
                        </li>
                        <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="2" class="aui-text-center">
                                    <i class="iconfont icon-querenmima aui-ftn18"></i>
                                </van-col>
                                <van-col span="22" class="aui-padded-l-10">
                                    <input type="password" name="password1" v-model="user.password1" placeholder="确认密码" class="aui-ftn14">
                                </van-col>
                            </van-row>
                        </li>
                        <li class="aui-list-item aui-margin-t-15">
                            <van-row>
                                <van-col span="2" class="aui-text-center">
                                     <i class="iconfont icon-tianjiahaoyou aui-ftn18"></i>
                                </van-col>
                                <van-col span="22" class="aui-padded-l-10">
                                    <input type="text" name="invite" v-model="user.invite" placeholder="邀请码" class="aui-ftn14">
                                </van-col>
                            </van-row>
                        </li>
                    </ul>
                </div>
                <div class="bt">
                    <div class="aui-ftn14 bt_cont">
                        <van-checkbox v-model="agree" shape="square" class="aui-padded-r-10" style="display: inline-block"></van-checkbox>
                        <span class="aui-text-red" @click="fnOpenArticle(3)">用户协议</span><span class="aui-text-6">和</span>
                        <span class="aui-text-red" @click="fnOpenArticle(2)">隐私政策</span>
                    </div>
                    <div class="download aui-text-center aui-ftn14 aui-text-red aui-hide" @click="fnOpenDownload">APP下载</div>
                </div>
            </div>
            <div class="aui-text-f aui-text-center aui-bg-red register-btn" @click="fnSubmit">确认注册</div>
        </div>
    </div>
</template>
<script>
	import sign from'../../../service/sign.js'
    export default {
        name: 'login',
        props: ['show'],
        data () {
            return {
                is_show: false,
                user: {
                    mobile: '',
                    password: '',
                    password1: '',
                    verify: '',
                    invite: ''
                },
                agree: true,
                code: {
                    isSet: false,
                    verify: '发送短信'
                }
            }
        },
        watch: {
            show (newVal, oldVal) {
                this.is_show = newVal
            }
        },
        mounted () {
            this.is_show = this.show;
        },
        methods: {
            // 发送短信
            fnVerify: function() {
                if (this.fnCheckMobile()){
                    if (!this.code.isSet) {
                        // 短信api
                        sign.fnSendMsg({mobile: this.user.mobile}).then(res => {
                          if (res) {
                            this.utils.fnMsg(res.msg);
                            if (res.status) {
                              this.setTime(60);
                            }
                          }
                        })
                    }
                }
            },
            // 校验手机号
            fnCheckMobile: function() {
                var mobileFormat = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
                if (!this.user.mobile) {
                    this.utils.fnMsg('手机号码不能为空！');
                    return false;
                } else if (!mobileFormat.test(this.user.mobile)) {
                    this.utils.fnMsg('手机号码格式不正确！');
                    return false;
                } else {
                    return true;
                }
            },
            /*
             * 倒计时
            */
            setTime: function(time) {
                if (time > 0) {
                    this.code.isSet = true;
                    this.code.verify = time+'秒后再试';
                    time = time - 1;
                    var vm = this;
                    setTimeout(function() {
                      vm.setTime(time)
                    } , 1000)
                } else {
                    this.code.isSet = false;
                    this.code.verify = '发送短信';
                }
            },
            fnCheckData: function() {
                var passwordFormat = /^.{6,16}$/ //密码格式
                if (this.fnCheckMobile()) {
                    if (!this.user.verify) {
                        this.utils.fnMsg('验证码不能为空！');
                        return false;
                    } else if (!this.user.password) {
                        this.utils.fnMsg('密码不能为空！');
                        return false;
                    } else if (!passwordFormat.test(this.user.password)) {
                        this.utils.fnMsg('请输入6~16位的密码');
                        return false;
                    } else if (!this.user.password1) {
                        this.utils.fnMsg('确认密码不能为空！');
                        return false;
                    } else if (this.user.password != this.user.password1) {
                        this.utils.fnMsg('两次密码输入不一致！');
                        return false;
                    } else if (!this.agree) {
                        this.utils.fnMsg('请同意用户协议和隐私政策');
                        return false;
                    } else {
                        return true
                    }
                }
            },
            // 注册功能
            fnSubmit: function() {
                if (this.fnCheckData()) {
                    console.log(this.$md5(this.user.password).toUpperCase())
                  sign.fnRegister({mobile: this.user.mobile, password: this.$md5(this.user.password).toUpperCase(),password1: this.$md5(this.user.password1).toUpperCase(),
                  verify: this.user.verify, invite: this.user.invite}).then(res => {
                    if (res) {
                      this.utils.fnMsg(res.msg);
                      if (res.status) {
                        var vm = this;
                        setTimeout(function() {
                          vm.utils.fnOpenCommon(vm, {name: 'login',query:{active: 0}})
                        }, 500)
                      }
                    }
                  })
                }
            },
            fnOpenArticle: function(type) {
              this.utils.fnOpenCommon(this, {name: 'notice_detail', query: {type: type}})
            },
            fnOpenDownload: function() {
                this.utils.fnOpenCommon(this, {name: 'download'})
            }
        }
    }
</script>
<style lang="scss" scoped>
    div.register {
        padding-bottom: 30px;
        div.content {
            width: 270px;
            margin: 0 auto;
            padding-bottom: 30px;
            li {
                height: 40px;
                line-height: 40px;
                input {
                    height: 36px;
                    line-height: 36px;
                    border: 0;
                    max-width: 90%;
                }
            }
            div.bt {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: row;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-justify-content: space-between;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
                div.download {
                    border: 1px solid var(--pink);
                    height: 30px;
                    line-height: 30px;
                    border-radius: 15px;
                    padding: 0 10px;
                }

                .bt_cont {
                    line-height: 32px;
                    .van-checkbox {
                        transform: translateY(3px)
                    }
                }
            }
        }
        div.register-btn {
            width: 270px;
            height: 50px;
            line-height: 50px;
            border-radius: 6px;
            margin: 0 auto;
        }
    }
</style>
